<template>
  <Dialog ref="dialog" width="800" :title="title">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item
          class="form_item el-col-8 right"
          style="margin-left: 0px"
          label="域名"
          prop="domain"
        >
          <el-input
            v-model="ruleForm.domain"
            placeholder="请输入域名"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-7 right" label="环境" prop="env">
          <el-select
            v-model="ruleForm.env"
            placeholder="Select"
            size="large"
            style="width: 150px"
          >
            <el-option
              v-for="item in envOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          class="form_item el-col-7 right"
          style="margin-left: 10px"
          label="类型"
          prop="type"
        >
          <el-select
            v-model="ruleForm.type"
            placeholder="Select"
            size="large"
            style="width: 150px"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <el-divider />
    <div class="right">
      <el-button class="height40" @click="closeChange">取消</el-button>
      <el-button type="primary" class="height40" @click="submit"
        >提交</el-button
      >
    </div>
  </Dialog>
</template>
<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ElMessage } from 'element-plus';
import { storeDomain } from '@/api/appv2/appv2';
import { ref } from 'vue';

const emit = defineEmits(['getStroeDomain']);

let { proxy } = getCurrentInstance();

const envOptions = [
  {
    value: 'prod',
    label: '正式环境',
  },
  {
    value: 'test',
    label: '测试',
  },
  {
    value: 'develop',
    label: '开发',
  },
];

const typeOptions = [
  {
    value: 'app',
    label: 'app',
  },
  {
    value: 'xcx',
    label: 'xcx',
  },
  {
    value: 'h5',
    label: 'h5',
  },
  {
    value: 'pc',
    label: 'pc',
  },
  {
    value: 'manage',
    label: 'manage',
  },
  {
    value: 'system',
    label: 'system',
  },
];

const customerInfo = ref(undefined);
const ruleForm = ref({
  domain: '',
  env: '',
  type: '',
});
const dialog = ref(null);
const title = ref('新增机构');
const rules = {
  domain: [
    {
      required: true,
      trigger: 'blur',
      message: '请输入域名',
    },
  ],
  env: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择环境',
    },
  ],
  type: [
    {
      required: true,
      trigger: 'blur',
      message: '请选择类型',
    },
  ],
};

// 提交
function submit() {
  proxy.$refs.ruleFormRef.validate((val) => {
    if (val) {
      if (title.value == '新增域名') {
        storeDomain({
          ...ruleForm.value,
          storeId: customerInfo.value.id,
          id: '0',
        }).then(() => {
          ElMessage.success('新增成功');
          dialog.value.closeChange();
          emit('getStroeDomain');
        });
      } else {
        storeDomain({
          ...ruleForm.value,
          storeId: customerInfo.value.storeId,
          id: customerInfo.value.id,
        }).then(() => {
          ElMessage.success('修改成功');
          dialog.value.closeChange();
          emit('getStroeDomain');
        });
      }
    } else {
      ElMessage.warning('请完善信息');
    }
  });
}
// 打开弹窗
function openchange(val, isNew) {
  customerInfo.value = val;

  if (isNew == 'false') {
    title.value = '编辑域名';

    ruleForm.value = {
      domain: val.domain,
      env: val.env,
      type: val.type,
    };
  } else {
    title.value = '新增域名';

    ruleForm.value = {
      domain: '',
      env: '',
      type: '',
    };
  }
  dialog.value.openChange();
}
// 关闭弹窗
function closeChange() {
  dialog.value.closeChange();
}
defineExpose({
  openchange,
});
</script>
<style>
.form_item {
  margin-bottom: 20px !important;
}

.right {
  margin-left: 40px;
}
</style>
